那些年，碰上过的面试题

记录一下最近碰上的面试题

js篇

1. 介绍一下Array的API/方法，具体到返回值和参数
   join / slice / splice / sort / push一类 / reverse
   经验总结：要讲出来能够拓展的API，拓展话题；要能够牢记不同API的返回值，例如reverse是否返回数组？pop返回值是什么？
2. Array的map与forEach的区别？可用代码实现辅助解释
   区别在于map返回一个新的数组，而forEach则时在原数组的基础上进行修改（允许对原数组进行修改）。
   forEach适合你不需要改变数据的时候，如打印、存入数据库，而map适合于你需要对数据进行修改等操作，还可以结合filter、reduce进行操作
3. 介绍一下事件绑定
   事件绑定是指将子元素上的事件绑定到父元素上，利用事件冒泡将子元素事件冒泡到父元素进行处理，当有多个子元素同时绑定时，可以利用e.target进行区分

4. 如何检测对象中是否存在某个属性

   1. 使用in关键字，该方法会拿到原型链上的属性
   2. 使用对象的hasOwnProperty方法，该方法只能判定自有属性
   3. 用undefined判断

5. 页面性能优化

   1. 减少Http请求数
   2. 异步加载js文件（动态创建script标签、async、defer），主意async和defer区别
   3. 浏览器缓存（强缓存、协商缓存）
   4. 使用CDN

   5. DNS预解析

      预解析相关标签
      ```
      <!--第一个标签是强制开启所有a标签的预解析（包含https）-->
      <meta http-equiv="x-dns-prefetch-control" content="on">
      <!--开启DNS预解析-->
      <link rel="dns-prefetch" href="//somewhere.com">
      ```
      

6. 写出以下程序输出内容

   var n = 1;
   var a = {
       n: 10,
       fn: function () {
           var n = 100;
           return n + this.n;
       }
   }
   var fn = a.fn;
   
   console.log(a.fn()); // 110
   console.log(fn()); // 101
   console.log(a.fn.call(this)); // 101
   console.log(a.fn.call(a)); // 110

7. 写出程序输出内容

   var a = {n: 10, m: 20};
   var b = a;
   var c = b;
   var d = {...b};
   
   b.n = 30;
   c = {n: 40};
   
   console.log(a.n); // 30
   console.log(b); // {n: 30, m: 20}
   console.log(c); // {n: 40}
   console.log(d); // {n: 10, m: 20}
   console.log(a === b); // true
   console.log(a === d); // false
   console.log(b === c); // false
   console.log(a === c); // false

8. 如何获取一个页面上的所有元素
9. 图片懒加载/预加载，同时有10000张图片怎么办？

   目前思路：利用onscroll+scrollTop

   追问：onscroll在什么情况下触发？

   相关链接

10. ES5和ES6的继承有什么区别
11. Web动画的几种常见方式？
12. POST提交数据的几种常见Content-Type
13. 如何定义一个方法，通过调用把视频的一帧生成预览图？（可以考虑Canvas相关）
14. 什么是重放攻击，列举几种常见的防御手段？

CSS篇

1. 介绍一下position: sticky和fixed的区别
   定位类型：相对定位（relative）、绝对定位（absolute、fixed）、粘性定位（sticky）
   该属性还在实验阶段
   position: sticky（此段引用MDN）

   MDN中position相关内容

   粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

2. 介绍一下Flex布局

   Flex布局即Flexible Box，弹性布局，目前主要应用场景在移动端，也有部分PC端场景应用，Flex能够很好解决布局的问题，有效解决了以往垂直居中难的问题，可以简便、完整、响应式的实现各种布局。

   任何一个容器都可以设置为flex布局，设置了之后，子元素的float、clear和vertical-align属性将会失效。

3. Reflow和Repaint
   简单介绍Reflow和Repaint，哪个会触发哪个？（触发顺序），哪个能够避免，哪个时尽量减少而不可能避免，css哪些操作会触发Reflow/Repaint

   Flex by 阮一峰

4. CSS3动画/CSS动画与js动画区别？（性能区别？）/CSS性能优化/CSS动画性能优化/js动画介绍

后续还会继续进行面试题的积累~